<template>
<div>
  <div class="layout bg-color-blue part1-layout">
    <div class="part1 layout-container">
      <div class="text-box">
        <div class="text">
          <div class="has-spark">
            <div class="title intel-one">{{ $t('itinerary.part1.title') }}</div>
            <div class="desc">{{ $t('itinerary.part1.desc') }}</div>
          </div>
        </div>
      </div>
      <img src="https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part1.png" alt="">
    </div>
  </div>

  <div class="layout">
    <div class="part2 layout-container">
      <div class="subtitle">
        <div class="title">{{ $t('itinerary.part2.title') }}</div>
        <div class="desc">{{ $t('itinerary.part2.desc') }}</div>
      </div>
      <div v-if="itineraryShow">
        <div class="tabs">
          <div
              v-for="(item, index) in itineraryItems"
              :class="[itineraryIndex === index ? 'tabs-active' : '', 'tabs-item']"
              @click="handleTabsClick(index)"
          >
            {{ item.scheduleItemDate }}
          </div>
        </div>
        <ItineraryComponents v-for="(item, index) in itineraryItems" v-show="itineraryIndex === index" :items="item.scheduleItems" />
      </div>

      <div class="list" v-if="!itineraryShow" >
        <div class="list-item" v-for="(item,index) in part2list">
          <img :src="item" alt="" style="width: 234px;height: 134px;object-fit: cover;">
<!--          <div class="date">{{ $t(`itinerary.part2.item[${index}].date`) }}</div>-->
          <div class="desc">{{ $t(`itinerary.part2.item[${index}].desc`) }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="layout bg-color-darkblue">
    <div class="part3 layout-container">
      <div class="title">{{ $t('itinerary.part3.title') }}</div>
      <div class="desc" v-html="$t('itinerary.part3.desc')"></div>
    </div>
  </div>

  <div class="layout">
    <div class="part4">
      <div class="text">
        <div class="title">{{ $t('itinerary.part4.title') }}</div>
        <div class="desc">{{ $t('itinerary.part4.desc') }}</div>
      </div>
      <div class="slider">
        <div class="left">
          <img @click="handleSliderArrowClick('left')" class="arrow" src="https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/arrow-left.png" alt="">
          <img :src="leftImg" alt="">
        </div>
        <div class="show">
          <img :src="showImg" alt="">
        </div>
        <div class="right">
          <img @click="handleSliderArrowClick('right')" class="arrow" src="https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/arrow-right.png" alt="">
          <img :src="rightImg" alt="">
        </div>
      </div>
      <div class="slider-nav">
        <div @click="handleSliderNavClick(index)" :class="[sliderCurrentIndex ===index ? 'slider-nav-item-active' : '', 'slider-nav-item']" v-for="(i,index) in sliderImgList"></div>
      </div>
    </div>
  </div>

  <div class="layout bg-color-lightgray" style="margin-top: 70px;">
    <div class="layout-container part5">
      <div class="title">{{ $t(`itinerary.part5.title`) }}</div>
      <div class="list">
        <div class="list-item" v-for="(item, index) in part5list">
          <img :src="item" alt="">
          <div class="text">{{ $t(`itinerary.part5.item[${index}]`) }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

</template>

<script>
import ItineraryComponents from "../../components/ItineraryComponents";
import {getMyItinerary} from "../../api/service";
export default {
  name: "itinerary",
  components: {ItineraryComponents},
  data () {
    return {
      itineraryShow: false,
      part2list: [
          "https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part2-1.png",
          "https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part5-1.png",
          "https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part2-2.png",
          "https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part2-4.png"
      ],
      showImg: '',
      rightImg: '',
      leftImg: '',
      sliderImgList: [
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-1.jpeg',
        'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-2.png',
        'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-3.jpeg'
      ],
      sliderCurrentIndex: 0,
      part5list: [
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/Itinerary-overnigh/part5-1.png',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/Itinerary-overnigh/part5-2.png',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/Itinerary-overnigh/part5-3.png',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/Itinerary-overnigh/part5-4.png',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/Itinerary-overnigh/part5-5.png'
      ],
      itineraryItems: [],
      itineraryIndex: 0
    }
  },
  mounted () {
    this.setSliderImage()
    this.getItinerary()
  },
  methods: {
    handleSliderArrowClick (arrow) {

      if (arrow === 'left') {
        this.sliderImgList.unshift(this.sliderImgList[2])
        this.sliderImgList.pop()

        if (this.sliderCurrentIndex > 0) {
          this.sliderCurrentIndex -= 1
        } else {
          this.sliderCurrentIndex = 2
        }
      }
      if (arrow === 'right') {
        this.sliderImgList.push(this.sliderImgList[0])
        this.sliderImgList.shift()
        if (this.sliderCurrentIndex < 2) {
          this.sliderCurrentIndex += 1
        } else {
          this.sliderCurrentIndex = 0
        }
      }
      this.setSliderImage()
    },
    setSliderImage () {
      this.showImg = this.sliderImgList[0]
      this.rightImg = this.sliderImgList[1]
      this.leftImg = this.sliderImgList[2]
    },
    handleSliderNavClick (index) {
      this.sliderCurrentIndex = index
      // 懒着写逻辑了
      if (index === 0) {
        this.sliderImgList = [
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-1.jpeg',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-2.png',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-3.jpeg'
        ]
      }
      if (index === 1) {
        this.sliderImgList = [
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-2.png',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-3.jpeg',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-1.jpeg'
        ]
      }
      if (index === 2) {
        this.sliderImgList = [
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-3.jpeg',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-1.jpeg',
          'https://intelaulinpro.oss-cn-beijing.aliyuncs.com/itinerary/part4-2.png'
        ]
      }
      this.setSliderImage()
    },
    getItinerary () {
      getMyItinerary().then(res => {
        console.log(res)
        if (res.code === 200) {
          if (!res.data) {
            // 没有行程
            this.itineraryShow = false
          }
          if (res.data) {
            this.itineraryShow = true
           this.itineraryItems = res.data.advanceScheduleItemsVos
          }
        }
        if (res.code !== 200) {
          this.itineraryShow = false
        }
      })
    },
    handleTabsClick (index) {
      console.log(index)
      this.itineraryIndex = index
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.part1-layout {
  /*height: 460px;*/
  margin-bottom: 40px;
  padding-bottom: 40px;
}
.part1 {
  display: flex;
  padding-top: 20px;
}
.text-box {
  margin: 76px 40px 0 0;
  box-sizing: border-box;
  display: block;

}
.part1 .text-box .text {
  width: 530px;
  padding: 40px;
  margin-left: 40px;
  margin-bottom: 40px;
  background: #0068B5;
  box-sizing: border-box;
  display: block;
  position: relative;
  /*text-align: justify;*/
}
.has-spark:after {
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 40px;
  height: 40px;
  content: "";
  display: block;
  background: #0068B5;
}
.part1 img {
  margin-top: 40px;
  width: 620px;
  height: 352px;
}
.part1 .text-box .text .title {
  font-size: 36px;
  color: #FFFFFF;
  padding-bottom: 30px;
}
.part1 .text-box .text .desc {
  font-size: 16px;
  color: #FFFFFF;
  line-height: 1.5;
}
.part2 {
  padding-top: 40px;
  box-sizing: border-box;
}
.part2 .subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}
.part2 .subtitle .title {
  font-weight: bold;
  font-size: 30px;
  color: #333333;
  text-align: center;
  padding-bottom: 12px;
}
.part2 .subtitle .desc {
  width: 800px;
  font-size: 24px;
  color: #666666;
  line-height: 34px;
  text-align: center;
}
.part2 .list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 40px;
}
.part2 .list .list-item {
  margin: 0 23px;
  width: 234px;
  text-align: center;
}
.part2 .list .list-item .date {
  font-weight: lighter;
  font-size: 16px;
  color: #333333;
}
.part2 .list .list-item .desc {
  font-weight: lighter;
  font-size: 16px;
  height: 40px;
  /*color: #0068B5;*/
}
.part3 {
  padding: 40px 0 80px 0;
}
.part3 .title {
  font-weight: bold;
  font-size: 28px;
  color: #FFFFFF;
  padding-bottom: 30px;
}
.part3 .desc {
  font-weight: lighter;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 20px;
  white-space: pre-line;
}
.part3 .desc br {
  display: block;
  content: " ";
  margin: 12px 0;
}

.part4 {
}

.part4 .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.part4 .text .title {
  font-weight: bold;
  font-size: 30px;
  color: #333333;
  text-align: center;
}
.part4 .text .desc {
  width: 800px;
  font-size: 24px;
  color: #666666;
  text-align: center;
  line-height: 34px;
}

.part4 .slider {
  display: flex;
  width: 100%;
}
.part4 .slider img {
  width: 100%;
}
.part4 .slider .left,
.part4 .slider .right {
  width: 200px;
  /*flex-grow: 0;*/
  position: relative;
}
.part4 .slider .left .arrow,
.part4 .slider .right .arrow {
  position: absolute;
  top: 50%;
  width: 138px;
  height: 48px;

}
.part4 .slider .left .arrow {
  left: 0;
}
.part4 .slider .right .arrow {
  right: 0;
}
.part4 .slider .left img,
.part4 .slider .right img {
  height: 100%;
  object-fit: cover;
}

.part4 .slider .show {
  width: 100%;
  /*flex-grow: 1;*/
}
.part4 .slider .show img {
  height: 100%;
  object-fit: cover;
}
.slider-nav {
  width: 100%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-nav .slider-nav-item {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #d6d6d6;
  margin: 0 8px;
}
.slider-nav .slider-nav-item-active {
  background-color: #00A3F6;
}

.part5 {
  padding: 40px 0;
}
.part5 .title {
  font-weight: bold;
  font-size: 30px;
  color: #333333;
  text-align: center;
  padding-bottom: 20px;
}
.part5 .list {
  display: flex;
  justify-content: space-between;
}
.part5 .list .list-item {
  display: flex;
  flex-direction: column;
  margin: 10px;
}
.part5 .list .list-item .text {
  font-size: 16px;
  color: #333333;
  text-align: center;
  padding-top: 8px;
}

.part5 .list .list-item img {
  width: 284px;
  height: auto;
}

.tabs {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 30px;
}
.tabs .tabs-item {
  width: 152px;
  height: 48px;
  background: #F3F3F3;
  font-size: 20px;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 24px;
  cursor: pointer;
}
.tabs-active {
  background: #0068B5 !important;
  color: white !important;
}
</style>
